$(function(){
  // 1. 获取所有数据
  getList()
  function getList(){
    $.ajax({
      method: 'get',
      url: BigNew.category_list,
      data: {},
      success: (res) => {
        console.log(res);
        // 调用摸版引擎
        const htmlStr=template('cateItem',{list:res.data});
        $('tbody').html(htmlStr)
      }
    })
  }
  //2.新增文章
  //2.1给新增按钮绑定点击事件
  $('#addBtn').click(()=>{
    //console.log(1);
    //2.2获取输入框类容 判定是否为空
    const name=$('#name').val().trim();
    const slug=$('#slug').val().trim();
    if(name===''||slug===''){
      return alert('空类容新增什么?')
    }
    // 2.3调用ajax接口
    $.ajax({
      method: 'post',
      url: BigNew.category_add,
      data: {name,slug},
      success: (res) => {
        console.log(res);
        if(res.code===201){
          //调用函数 让页面重新刷新
          getList()
          //点击新增关闭模态框
          $('#exampleModal').modal('hide')
          // 清空模态框内容
          $('#name').val('');
          $('#slug').val('');
        }
        
      },
      error:()=>{
        alert('新增失败,name或者slug已存在')
      }
    })
  })
  //3 隐藏或显示新增/编辑按钮
  //3.1 使用bootstrap插件的方法
  $('#exampleModal').on('show.bs.modal', function (e) {
    //console.log(e.relatedTarget);
    const targetText=$(e.relatedTarget).text().trim()
    //console.log(targetText);
    if(targetText==='新增分类'){
      //隐藏编辑按钮 显示新增按钮
      $('#addBtn').show();
      $('#editBtn').hide();
      // 把点击新增按钮后输入框的文本清空
      $('#name').val('');
      $('#slug').val('');
    } // 编辑分类的业务
    else if(targetText==='编辑'){
      // 隐藏新增按钮 显示编辑按钮
      $('#addBtn').hide()
      $('#editBtn').show()
      //获取对应按钮的tr行的分类名称和分类别名
      const name=$(e.relatedTarget).parents('tr').children().eq(0).text();
      const slug=$(e.relatedTarget).parents('tr').children().eq(1).text();
      //console.log(name,slug);
      $('#name').val(name);
      $('#slug').val(slug);
      // 获取编辑按钮的id值
      const id=$(e.relatedTarget).attr('data-id');
      //console.log(id);
      //将编辑按钮的id值传到模态框中的编辑按钮
      $('#editBtn').attr('data-id',id);
      //console.log($('#editBtn'));
    }
  })
  //4.点击模态框中编辑按钮编辑数据
  $('#editBtn').click(()=>{
    //获取id值和输入框的内容
    const id=$('#editBtn').attr('data-id');
    const name=$('#name').val().trim();
    const slug=$('#slug').val().trim();
    //console.log({id,name,slug});
    // 做不能为空判定
    if(name===''||slug===''){
      return alert('空类容新增什么?')
    }
    //请求ajax
    $.ajax({
      method: 'post',
      url: BigNew.category_edit,
      data: {id,name,slug},
      success: (res) => {
        console.log(res);
        if(res.code===200){
          getList()
          //点击新增关闭模态框
          $('#exampleModal').modal('hide')
          // 清空模态框内容
        }
      },
       error:()=>{
        alert('新增失败,name或者slug已存在')
      } 
    })
  })
  // 5. 删除分类
  // 通过事件委托绑定事件，由于内部需要用到 this，所以需要写成 function
  $('tbody').on('click', '.btn-danger', function () {
    // 获取删除按钮自己身上的 id 属性，
    const id = $(this).attr('data-id')
    $.ajax({
      method: 'POST',
      url: BigNew.category_delete,
      data: { id },
      success: (res) => {
        // console.log(res)
        // 删除成功，重新获取分类列表数据
        getList()
      },
    })
  })
})